<template>
    <!-- 搜索 -->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="等级名称">
            <el-input placeholder="请输入等级名称" clearable />
        </el-form-item>
        <el-form-item label="升级方式">
            <el-select
            placeholder="升级方式"
            clearable
            >
                <el-option label="默认获取" value="默认获取" />
                <el-option label="付费升级" value="付费升级" />
                <el-option label="累计消费次数升级" value="累计消费次数升级" />
                <el-option label="累积消费金额升级" value="累积消费金额升级" />
            </el-select>
        </el-form-item>
        <el-form-item label="状态">
            <el-select
                placeholder="状态"
                clearable
                >
                <el-option label="启用" value="启用" />
                <el-option label="禁用" value="禁用" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button type="primary" @click="onSubmit">重置</el-button>
            <el-button @click="openGiftShow = true">+ 新增</el-button>
        </el-form-item>
    </el-form>
    <!-- 新增弹窗 -->
    <el-dialog v-model="openGiftShow" width="788px">
        <template #header> <div class="plusvip">新增开卡赠礼</div> </template>
        <el-form ref="addfrom" :model="openGift" :rules="rules" label-position=right>
            <el-form-item label="会员等级" prop="grade" label-width="140">
            <el-select
              v-model="openGift.grade"
              placeholder="会员等级"
              clearable
            >
                <el-option label="普通会员" value="普通会员" />
                <el-option label="铜牌会员" value="铜牌会员" />
                <el-option label="银牌会员" value="银牌会员" />
                <el-option label="金牌会员" value="金牌会员" />
                <el-option label="钻牌会员" value="钻牌会员" />
            </el-select>
            </el-form-item>
            <el-form-item label="卡券ID" label-width="140">
                <el-input v-model="openGift.giftid" placeholder="请输入要赠送的卡券ID"/>
            </el-form-item>
            <el-form-item label="卡券数量" label-width="140">
                <el-input v-model="openGift.giftno" placeholder="请输入要赠送的卡券数量"/>
            </el-form-item>
            <el-form-item label="积分数量" label-width="140">
                <el-input v-model="openGift.jifen" placeholder="请输入升级条件描述"/>
            </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="openGiftShow = false">取消</el-button>
            <el-button @click="addGift" type="primary">确定</el-button>
        </span>
        </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="editGiftShow" width="788px">
        <template #header> <div class="plusvip">修改开卡赠礼</div> </template>
        <el-form ref="addfrom" :model="openGiftList" :rules="rules" label-position=right>
            <el-form-item label="会员等级" prop="grade" label-width="140">
            <el-select
              v-model="openGiftList.grade"
              placeholder="会员等级"
              clearable
            >
                <el-option label="普通会员" value="普通会员" />
                <el-option label="铜牌会员" value="铜牌会员" />
                <el-option label="银牌会员" value="银牌会员" />
                <el-option label="金牌会员" value="金牌会员" />
                <el-option label="钻牌会员" value="钻牌会员" />
            </el-select>
            </el-form-item>
            <el-form-item label="卡券ID" label-width="140">
                <el-input v-model="openGiftList.giftid" placeholder="请输入要赠送的卡券ID"/>
            </el-form-item>
            <el-form-item label="卡券数量" label-width="140">
                <el-input v-model="openGiftList.giftno" placeholder="请输入要赠送的卡券数量"/>
            </el-form-item>
            <el-form-item label="积分数量" label-width="140">
                <el-input v-model="openGiftList.jifen" placeholder="请输入升级条件描述"/>
            </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="editGiftShow = false">取消</el-button>
            <el-button @click="editGiftOK" type="primary">确定</el-button>
        </span>
        </template>
    </el-dialog>
    <Page>
        <template #ct>
            <!-- 等级列表 -->
            <el-table :data="giftList" style="width: 100%" >
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="grade" label="会员等级" />
                <el-table-column prop="give" label="赠送卡券" align="center" />
                <el-table-column prop="giftno" label="卡券数量" align="center"/>
                <el-table-column prop="validity" label="赠送积分" align="center"/>
                <el-table-column  label="创建时间" align="center">
                    <template #default="{row}">
                        <span>{{ setData(row.createdAt) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" align="center">
                    <template #default="{row}">
                        <span>{{ setData(row.updatedAt) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="{row}">
                        <el-switch
                            :before-change="()=>changeSwitch(row, row.state, row.id)"
                            v-model="row.state"
                            class="ml-2"
                            :inactive-value="0"
                            :active-value="1"
                            style="--el-switch-on-color: #00acac; --el-switch-off-color: #dcdfe6"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="mode" label="操作" align="center" fixed="right">
                    <template #default="{ row }">
                        <span @click="handleShowEdit({...row})" class="edit">
                        <span class="iconfont icon-xiugai"></span>
                            修改
                        </span>
                        <span @click="delGiftList(row.id,row.grade)" class="edit">
                        <span class="iconfont icon-shanchu"></span>
                            删除
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template #ft>
            <el-pagination
                layout="total, prev, pager, next, sizes, jumper"
                background
                :page-sizes="[10, 30, 50, 100]"
                :total="total"
                :default-page-size="limit"
                :current-page="page"
                @size-change="handeSizeChange"
                @current-change="handlePageChange"
            />
        </template>
    </Page>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { addGift, giftList, delGift, updateGift } from '@/api/gift';
import { ElMessage, ElMessageBox, dayjs } from 'element-plus';

export default defineComponent({
    data() {
        return {
            openGiftShow: false,
            editGiftShow: false,
            openGift: {
                grade: '',
                giftid: '',
                giftno: '',
                jifen: '',
                give: '',
                state: true,
            },
            // 编辑
            openGiftList: {
                grade: '',
                giftid: '',
                giftno: '',
                jifen: '',
                give: '无',
                state: true,
            },
            rules: {
                grade: [{ required: true, message: '等级不能为空', trigger: 'blur' }],
            },
            // 列表
            giftList: [],
            page: 1,
            limit: 30,
            total: 0,
        };
    },
    methods: {
        // 搜索方法
        onSubmit() {

        },
        // 添加开卡的方法
        async addGift() {
            // console.log('this.openGift', this.openGift);
            const res = await addGift(this.openGift);
            // console.log('resresres', res);
            const { status } = res;
            if (status === 201) {
                this.openGiftShow = false;
                ElMessage({
                    message: '新增成功',
                    type: 'success',
                });
            }
        },
        // 获取列表
        async getList() {
            const $skip = (this.page - 1) * this.limit;
            const res = await giftList({
                $skip,
                $limit: this.limit,
            });
            console.log('获取到的等级列表是', res);
            this.giftList = res.data.data;
            this.total = res.data.total;
        },
        // 修改按钮
        handleShowEdit(row:any) {
            this.openGiftList = row;
            this.editGiftShow = true;
        },
        async editGiftOK() {
            let { id, ...postdata } = this.openGiftList;
            let res = await updateGift(id, postdata);
            console.log('resresres', res);
            const { status } = res;
            if (status === 200) {
                this.$message.success('修改成功');
                this.editGiftShow = false;
                this.getList();
            } else {
                this.$message.warning('修改失败');
            }
        },
        // 删除按钮
        delGiftList(id:number, grade:string) {
            ElMessageBox.confirm(
                `是否确认删除"${grade}"的选项？`,
                '系统提示',
                {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                },
            )
                .then(async () => {
                    const res = await delGift(id);
                    const { status } = res;
                    if (status === 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        });
                        this.getList();
                    } else {
                        ElMessage({
                            type: 'info',
                            message: '删除失败',
                        });
                    }
            })
                .catch(() => {
                console.log('点击了取消');
            });
        },
        // 处理分页
        handeSizeChange(val: number) {
            console.log('val', val);
            this.limit = val;
            this.getList();
        },
        handlePageChange(val: number) {
            this.page = val;
            this.getList();
        },
        // 状态改变的方法
        changeSwitch(row: any, val: number, id: number) {
            console.log('valvalvalval', row.state);
            if (!val) {
                console.log('启动');
                ElMessageBox.confirm(
                    `确定启用ID等于"${id}"吗？`,
                    '系统提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                    },
                  )
                    .then(async () => {
                        console.log('点击了确认');
                        this.openGiftList = row;
                        // console.log('this.openGiftList', this.openGiftList);
                        let { ...postdata } = this.openGiftList;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 1;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGift(id, postdata);
                        this.getList();
                      ElMessage({
                        type: 'success',
                        message: '启用成功',
                      });
                    }).catch(async () => {
                      this.openGiftList = row;
                    //   console.log('this.openGiftList', this.openGiftList);
                        let { ...postdata } = this.openGiftList;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 0;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGift(id, postdata);
                        this.getList();
                    });
            } else {
                console.log('关闭');
                ElMessageBox.confirm(
                    `确定禁用ID等于"${id}"吗？`,
                    '系统提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                    },
                  )
                    .then(async () => {
                        this.openGiftList = row;
                        // console.log('this.openGiftList', this.openGiftList);
                        let { ...postdata } = this.openGiftList;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 0;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGift(id, postdata);
                        this.getList();
                        ElMessage({
                            type: 'success',
                            message: '禁用成功',
                        });
                    }).catch(async () => {
                        this.openGiftList = row;
                        // console.log('this.openGiftList', this.openGiftList);
                        let { ...postdata } = this.openGiftList;
                        // console.log('this.postdata', id, postdata);
                        postdata.state = 1;
                        // console.log('this.postdata', id, postdata.state);
                        await updateGift(id, postdata);
                        this.getList();
                    });
            }
        },
        // 时间格式化方法
        setData(t:string) {
              // console.log('注册时间', row.createdAt);
                const newtime = dayjs(t).format('YYYY-MM-DD HH:mm'); // 初始化日期时间
                // console.log('注册时间', newtime);
                return newtime;
        },
    },
    mounted() {
        this.getList();
    },
});
</script>

<style lang="scss" scoped>
.edit{
  cursor: pointer;
  color: #00acac;
  .iconfont{
    font-size: 14px;
  }
}
</style>
